<!--
 * @Description  : 业务流程
 * @Author       : zhao
 * @Date         : 2022-08-09 09:19:29
 * @LastEditors  : zhao
 * @LastEditTime : 2022-08-24 14:49:19
-->
<!--  -->
<template>
    <div class="process">
        <div>
            <div class="title">地质资料网络订单流程</div>
            <div class="tupian">
                <img src="../../assets/liucheng/流程图.jpg" alt="">
            </div>
            <div class="tips">
                <span>温馨提示：</span>
                <p>1、订单状态会在订单系统中实时更新。申请人可在线跟踪订单的流程进度。</p>
                <p>2、订单提交完成后，一般将在1-10个工作日内完成审核和加工。订单的审批和加工时长受时段内订单数量和单个订单中资料数量的影响，可能会有提前或延后。</p>
                <p>3、另外，我们会通过短信、电话或邮件通知申请人到馆领取地质资料，请申请人关注即时的信息反馈渠道。需注意：到馆领取人，须为订单申请人本人。</p>
            </div>
            <!-- <div class="card">
                
                <el-carousel :interval="90000" type="card" height="400px">
                <el-carousel-item v-for="item in imgList" :key="item.id">
                    <img :src="item.idView" alt="" class="image">
                </el-carousel-item>
            </el-carousel>
            </div> -->
            <!-- <div class="process_cont">
                <div class="title2">
                    <span>如何完成借阅？</span>
                </div>
                <el-col :span="10" :offset="2">
                    <div class="liucheng liucheng1">
                        <div class="content">
                            <h2>第一步：</h2>
                            <p>点击“登录/注册”，完成用户登录。若您还未建立账号，请点击“注册”完善您的个人信息，以便使用更多功能。</p>
                        </div>
                        <div class="img">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="require('../../assets/liucheng/liucheng_1.png')"
                                :preview-src-list="[require('../../assets/liucheng/liucheng_1.png')]"
                            >
                            </el-image>
                        </div>
                    </div>
                    <div class="liucheng liucheng1">
                        <div class="content">
                            <h2>第三步：</h2>
                            <p>进入档案详情页后，选择相应文件后，点击“加入借阅车”。</p>
                        </div>
                        <div class="img">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="require('../../assets/liucheng/liucheng_3.png')"
                                :preview-src-list="[require('../../assets/liucheng/liucheng_3.png')]"
                            >
                            </el-image>
                        </div>
                    </div>
                    <div class="liucheng liucheng3">
                        <div class="content">
                            <h2>第五步：</h2>
                            <p>点击“个人中心”，在借阅单中查看档案申请进度。</p>
                        </div>
                        <div class="img">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="require('../../assets/liucheng/liucheng_5.png')"
                                :preview-src-list="[require('../../assets/liucheng/liucheng_5.png')]"
                            >
                            </el-image>
                        </div>
                    </div>
                    <div class="tips">
            
            <span>温馨提示：</span>
            <p>1、订单状态会在订单系统中实时更新。申请人可在线跟踪订单的流程进度。</p>
            <p>2、订单提交完成后，一般将在3-10个工作日内完成审核和加工。订单的审批和加工时长受时段内订单数量和单个订单中资料数量的影响，可能会有提前或延后。</p>
            <p>3、另外，我们会通过短信、电话或邮件通知申请人到馆领取地质资料，请申请人关注即时的信息反馈渠道。需注意：到馆领取人，须为订单申请人本人。</p>
        </div>
                </el-col>
                <el-col :span="10" :offset="2">
                    <div class="liucheng liucheng2">
                        <div class="content">
                            <h2>第二步：</h2>
                            <p>通过属性查询或空间检索找到相应文件，点击题名，进入档案详情页。</p>
                        </div>
                        <div class="img">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="require('../../assets/liucheng/liucheng_2.png')"
                                :preview-src-list="[require('../../assets/liucheng/liucheng_2.png')]"
                            >
                            </el-image>
                        </div>
                    </div>
                    <div class="liucheng liucheng4">
                        <div class="content">
                            <h2>第四步：</h2>
                            <p>点击“个人中心”，选择借阅车，在借阅单中根据提示上传材料并提交订单申请。</p>
                        </div>
                        <div class="img">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="require('../../assets/liucheng/liucheng_4.png')"
                                :preview-src-list="[require('../../assets/liucheng/liucheng_4.png')]"
                            >
                            </el-image>
                        </div>
                    </div>
                </el-col>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
        }
    },

    components: {},

    computed: {},

    mounted() {},

    methods: {},
}
</script>
<style lang='scss' scoped>
// .el-carousel__item h3 {
//     color: #475669;
//     font-size: 14px;
//     opacity: 0.75;
//     line-height: 200px;
//     margin: 0;
//   }
  
//   .el-carousel__item:nth-child(2n) {
//     background-color: #99a9bf;
//   }
  
//   .el-carousel__item:nth-child(2n+1) {
//     background-color: #d3dce6;
//   }

.process {
    padding: var(--main-padding);
    background: white;
    // min-height: calc(100vh - 3.4rem);
    // height: 1500px;
   
    .tupian {
    text-align: center;

        img {
            margin-left: 300px;
        }
    }

    .title {
        font-size: 36px;
        font-weight: bold;
        text-align: center;
        color: #515a6e;
        padding-top: 50px;
        padding-bottom: 30px;
    }

    .title2 {
        margin-bottom: 30px;
        // margin-left: 50px;

        span{
        font-size: 40px;
        font-weight:bold;
        }
    }

    

    .process_cont {
    }

    .liucheng {
        display: flex;
        float: left;
        width: 100%;
        padding-bottom: 70px;

        div {
            padding: 20px;
        }

        .content {
            width: 400px;
            height: 4.62rem;

            h2 {
                margin: 0;
            }

            p {
                margin: 0;
                padding-top: 15px;
                // text-indent: 2em;
                line-height: 0.555rem;
                font-size: 0.296rem;
            }
        }

        .img {
            width: 50%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .liucheng2 {
        padding-top: 250px;
    }

    .liucheng4 {
        padding-top: 150px;
    }

    .liucheng1 {
    }

    .liucheng3 {
        padding-top: 150px;
    }
    
    .tips {
        text-align: left;
        font-size: 23px;
        margin-bottom: 200px;
        line-height: 35px;

        span {
            font-size: 30px;
            font-weight: bold;
        }

        p {
            // text-indent: 2em;
        }
    }
}
</style>